<template>
  <div class="preview flex flex-s flex-col h-[100%] gap-4">
    <a-card class="w-[100%]">
      <div class="flex justify-between">
        <div>图片预览</div>
        <a-button @click="cropperMode = 'edit'">裁剪</a-button>
      </div>
    </a-card>
    <div class="flex-1 flex flex-s image">
      <a-image v-if="cropperImage" :src="cropperImage" />
      <a-empty v-else>
        <template #description>
          <div>没有图片</div>
          <div>
            <a-button @click="cropperMode = 'upload'">返回上传</a-button>
          </div>
        </template>
      </a-empty>
    </div>
  </div>
</template>

<script setup lang="ts">
import { cropperImage, cropperMode } from '../data/data';
</script>

<style lang="scss" scoped>
.preview {
  height: 100%;

  img {
    width: 100%;
    height: 100%;
  }
}
.image {
  border: 2px dashed var(--border-color);
  width: 100%;
}
</style>
